<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>404</title>
  <style>
    * { 
      margin: 0; padding: 0;
    }
    body {
      background: #ccc;
      font: 14px/1.4 Microsoft YaHei,SimSun,Arial;
    }
    h2 {
      margin: 20px auto;
      text-align: center;
    }
    p {
      margin: 10px;
      text-align: center;
    }
  </style>
</head>
<body>
  <h2>Oops, 404</h2>
  <p>Sorry, 找不到你想要的页面<p>
  <a href="http://littlewin.info/">返回首页</a>

  <canvas id="canvas" style="/*border:1px solid #aaa;*/display:block;margin:50px auto;box-shadow:0px 0px 4px 0px rgba(0,0,0,0.4);">
    当前浏览器不支持Canvas，请更换浏览器后再试！
  </canvas>
  <script>
    var searchLight={x:400,y:400,radius:150,vx:Math.random()*5+10,vy:Math.random()*5+10};
    var rot=0;
    window.onload=function(){
      var canvas=document.getElementById("canvas");
      canvas.width=600;
      canvas.height=600;
      if(canvas.getContext){
        var context=canvas.getContext("2d");
        setInterval(
          function(){
            draw(context);
            update(canvas.width,canvas.height);
          },
          40
        );
      }
    }
    function draw(cxt){
      var canvas=cxt.canvas;
      cxt.clearRect(0,0,canvas.width,canvas.height);
      cxt.save();
      cxt.beginPath();
      cxt.fillStyle="rgba(0,0,0,1)";
      cxt.fillRect(0,0,canvas.width,canvas.height);
      cxt.beginPath();
      // cxt.arc(searchLight.x,searchLight.y,searchLight.radius,0,2*Math.PI);
      cxt.save();
      cxt.translate(searchLight.x,searchLight.y);
      cxt.rotate(rot/180*Math.PI);
      cxt.scale(searchLight.radius,searchLight.radius);
      starPath(cxt);
      cxt.fillStyle="#fff";
      cxt.fill();
      cxt.restore();
      cxt.clip();
      cxt.font="bold 100px Arial";
      cxt.textAlign="center";
      cxt.textBaseline="middle";
      cxt.fillStyle="#058";
      cxt.fillText("WHAT",canvas.width/2,canvas.height/4);
      cxt.fillText("YOU",canvas.width/2,canvas.height/2);
      cxt.fillText("WANT",canvas.width/2,canvas.height*3/4);
      cxt.restore();
    }
    function update(canvasWidth,canvasHeight){
      rot+=2;
      searchLight.x+=searchLight.vx;
      searchLight.y+=searchLight.vy;
      if(searchLight.x-searchLight.radius<=0){
        searchLight.vx=-searchLight.vx;
        searchLight.x=searchLight.radius;
      }
      if(searchLight.x+searchLight.radius>=canvasWidth){
        searchLight.vx=-searchLight.vx;
        searchLight.x=canvasWidth - searchLight.radius;
      }
      if(searchLight.y-searchLight.radius<=0){
        searchLight.vy=-searchLight.vy;
        searchLight.y=searchLight.radius;
      }
      if(searchLight.y+searchLight.radius>=canvasHeight){
        searchLight.vy=-searchLight.vy;
        searchLight.y=canvasHeight - searchLight.radius;
      }
    }
    function starPath(cxt){
      cxt.beginPath();
      for (var i = 0; i < 5; i++) {
        cxt.lineTo(Math.cos((18+i*72)/180*Math.PI),-Math.sin((18+i*72)/180*Math.PI));
        cxt.lineTo(Math.cos((54+i*72)/180*Math.PI)*0.5,-Math.sin((54+i*72)/180*Math.PI)*0.5);
      }
      cxt.closePath();
      cxt.stroke();
    }
  </script>
</body>
</html>